<template>
        <div class="mynews">
            <div class="my-txt">
                <span>我的服务</span>
            </div>
            <div class="newList">
                <ul>
                    <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                <i class="bi bi-person"></i>
                                </div>
                                <span>会员中心</span>
                            </div>
                        </a>
                    </li>
                      <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                <i class="bi bi-gift"></i>
                                </div>
                                <span>砍价记录</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                 <i class="bi bi-tv"></i>
                                </div>
                                <span>我的推广</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                <i class="bi bi-coin"></i>
                                </div>
                                <span>我的余额</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                    <i class="bi bi-geo-alt"></i>
                                </div>
                                <span>地址信息</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <router-link to="/collect">
                            <div>
                                <div class="new-icon">
                                 <i class="bi bi-star"></i>
                                </div>
                                <span>我的收藏</span>
                            </div>
                        </router-link>
                    </li>
                    <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                 <i class="bi bi-ticket-detailed"></i>
                                </div>
                                <span>优惠劵</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div>
                                <div class="new-icon">
                                  <i class="bi bi-person-plus"></i>
                                </div>
                                <span>联系客服</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

</template>

<style lang="less">
@import "../assets/css/reset.css";
@import "../assets/less/variable.less";

.mynews{
    width: 95%;
    height: 200px;
    background: #fff;
    border-radius: 10px;
    margin-left: 10px;
    .my-txt{
        height: 38px;
        line-height: 38px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 10px;
        border:1px solid #f0f0f0
    }
}
.newList{
    ul{
        li{
            float: left;
            width: 88px;
            height: 80px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            .new-icon{
                font-size: 26px;
                color: #b077bc;
                padding-top: 10px;
            }
        }
    }
}
</style>